<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video{
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 
        video并不是支持所有的视频格式，目前来说支持的有mp4,ogg,webm。
        而且还有一个很要命的问题，那就是有的浏览器不支持webm、ogg，所以最好保证视频是mp4格式

        注意：谷歌浏览器会禁止掉视频标签的autoplay也就是自动播放功能，不过也不用担心，加上muted也就是静音属性就可以解决了。另外，video也是可以设置宽高等属性的，你就可以把这个东西也理解为一个盒子，很多div元素可以加的css属性，对他也适用的。
     -->
     <!-- 
        video标签属性
            controls: 向用户显示控制组件
            autoplay: 自动播放
            muted: 静音
            loop: 循环播放

            preload: 预加载

            poster: 封面图片地址
      -->
     <video src="https://webstatic.mihoyo.com/upload/static-resource/2022/09/16/f536b81cf99ea2c2a2ae87b1e643ec4c_7786134220728107534.mp4" controls autoplay muted></video>
</body>
</html>